<template>
    <div>
       <h1>会员信息列表展示</h1>
       <table class="table">
        <thead>
            <tr>
                    <td>员工编号</td>
                    <td>姓名</td>
                    <td>密码</td>
                    <td>出生日期</td>
                    <td>年龄</td>
                    <td>头像</td>
                    <td>是否入职成功</td>
                    <td>状态</td>
                     <td>性别</td>
                      <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="a in data">
                 <td>{{a.id  }}</td>
                    <td>{{a.name  }}</td>
                    <td>{{a.pos  }}</td>
                    <td>{{moment (a.birthDay).format("YYYYMMDD")  }}</td>
                    <td>{{a.age  }}</td>
                    <td> <img :src="'https://localhost:7195'+a.img" style="width: 60px;height: 60px;"></td>
                    <td>{{a.isDelete?"成功":"失败"  }}</td>
                    <td>{{a.startName  }}</td>
                     <td>{{a.sex==1?"男":"女" }}</td>
                      <td><input type="button" value="编辑" @click="UptUser(a.id)"></td>
            </tr>
        </tbody>
       </table>
       共{{swert.totalpage  }}页，共{{swert.count  }}行，当前第{{find.index  }}页，每页{{ find.size }}行
       <input type="button" value="首页" @click="Fanye(1)">
        <input type="button" value="上一页" @click="Fanye(find.index-1)">
         <input type="button" v-for="b in swert.totalpage" :value="b" @click="Fe(b)">
         <input type="button" value="下一页" @click="Fanye(find.index+1)">
          <input type="button" value="尾页" @click="Fanye(1)">
           <select v-model="find.size" @click="fs">
        <option :value="2">请选择</option>
         <option :value="3">每页三行</option>
          <option :value="5">每页五行</option>
           <option :value="7">每页七行</option>
       </select>
       跳转
       <input type="number" v-model="tets">
       <input type="button" value="跳转" @click="Fanye(tets)">
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios";
import moment from "moment";
import { useRouter } from "vue-router";
const router=useRouter()
const UptUser=(id:any)=>{
         router.push({path:"/UptView",query:{id:id}})
}
const data=ref([{
     "id": 2,
      "name": "张三",
      "pos": "1234",
      "birthDay": "2025-06-11T00:00:00",
      "age": 22,
      "img": "/pix/04094c9b-75d8-4bc3-8155-cd758e6de53e1.png",
      "startId": 1,
      "sex": 1,
      "isDelete": true,
      "startName": "出勤"
}])
onMounted(()=>{
    Show()
})
const Fe=(val:any)=>{
    find.value.index=val
    Show()
}
const fs=()=>{
    find.value.index=1
    Show()
}
const Show=()=>{
    axios.get("https://localhost:7195/api/User/GetUser",{params:find.value}).then(res=>{
        data.value=res.data.data
        swert.value.count=res.data.count
        swert.value.totalpage=Math.ceil(swert.value.count/find.value.size)
    })
}
const Fanye=(val:any)=>{
     if(val>=1 && val<=swert.value.totalpage){
        find.value.index=val
        Show()
     }
}
const find=ref({
    index:1,
    size:2
})
const swert=ref({
    count:0,
    totalpage:0
})
</script>

<style scoped>

</style>